.sidebar {
  background-color: $color-primary;
  grid-column:sidebar-start / sidebar-end;
  grid-row:1 / -1;

  display: flex;
  justify-content: center;

  @media only screen and (max-width: $bp-large){
    grid-column: 1 / -1;
    grid-row: 1 / 2;
    justify-content: flex-end;
    align-items: center;
  }

}
.nav-btn{
  border: none;
  border-radius: 0;

  background-color: #fff;
  height: 2px;
  width: 4.5rem;
  margin-top: 4rem;

  &::before,&::after{
    background-color: #fff;
    height: 2px;
    width: 4.5rem;
    content: "";
    display: block;
  }
  &::before{
    transform: translateY(-1.5rem);
  }
  &::after{
    transform: translateY(1.3rem);
  }

  @media only screen and (max-width: $bp-large){
    margin-top: 0;
    margin-right: 3rem;

    &::before{
      transform: translateY(-1.2rem);
    }
    &::after{
      transform: translateY(1rem);
    }
  }
}